<template>
  <div class="new-publish">
    <div class="bg-color"></div>
    <head-top head-title="选择分类" go-back="true" right-title="下一步"  @detail="detailPage"></head-top>
    <div class="wrapper">
      <div class="name">
        <div @click="toggle1"><span class="title" :class="{'active' : fruitShow1}">邻家特产</span><span class="down" v-show="down1"></span></div>
        <transition name="ljtc">
          <div class="content" v-show="fruitShow1">
            <ul class="clearfix">
              <li><span>蔬菜水果</span></li>
              <li><span>肉禽蛋奶</span></li>
              <li><span>水产海鲜</span></li>
              <li><span>零嘴烘焙</span></li>
              <li><span>米面粮油</span></li>
              <li><span>干酱腊卤</span></li>
              <li><span>养生滋补</span></li>
            </ul>
          </div>
        </transition>
      </div>
      <div class="name">
        <div @click="toggle2"><span class="title" :class="{'active' : fruitShow2}">生活服务</span><span class="down" v-show="down2"></span></div>
        <transition name="ljtc">
          <div class="content" v-show="fruitShow2">
            <ul class="clearfix">
              <li><span>家电清洗</span></li>
              <li><span>家政服务</span></li>
              <li><span>健康养生</span></li>
              <li><span>宠物绿植</span></li>
              <li><span>家庭洗护</span></li>
              <li><span>美容美业</span></li>
              <li><span>数码维护</span></li>
              <li><span>更多</span></li>
            </ul>
          </div>
        </transition>
      </div>
      <div class="name">
        <div @click="toggle3"><span class="title" :class="{'active' : fruitShow3}">邻里学堂</span><span class="down" v-show="down3"></span></div>
        <transition name="ljtc">
          <div class="content" v-show="fruitShow3">
            <ul class="clearfix">
              <li><span>兴趣爱好</span></li>
              <li><span>少儿培训</span></li>
              <li><span>亲子活动</span></li>
              <li><span>交友聚会</span></li>
            </ul>
          </div>
        </transition>
      </div>
    </div>
    <div class="helper" @click="goSelectPage()">
      <span class="bgimg"></span>
      <span class="des">我们该如何选择分类</span>
    </div>
  </div>
</template>
<style lang="scss">
   @import "../../common/sass/base.scss";
   @import "../../common/sass/mixin.scss";
  .new-publish {
    width: 100%;
    background: #fff;        
    padding-top: 40px;
    box-sizing: border-box;
    .wrapper{
      padding: 0px 10px;
      .name{
        padding: 15px 0;
        @include border-bottom-1px(rgb(217,217,217));
        &:last-child{
          @include border-none();
        }
        .title{
          font-size: 14px;
          &.active{
            color:#686868;
          }
        }
        .down{
          float: right;
          height: 16px;
          width: 8px;
          background-size: 8px 16px;
          background-repeat: no-repeat;
          @include bgimg("../home/images/back");
        }
        .content{
         ul{
            width: 100%;
            padding-left: 10px;
            li{
              float: left;
              text-align: center;
              margin: 10px 10px 10px 0px;
              width: 30%;
              span{
                display: inline-block;
                width: 80px;
                height: 35px;
                line-height: 35px;
                border: 1px solid rgb(217,217,217);
                font-size: 14px;
                border-radius: 4px;
              }
            }
          }
        }
      }
    }
    .helper{
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      height: 50px;
      line-height: 50px;
      text-align: center;      
      background-color: #fff;
      .des{
        font-size: 17px;
        color: #469AE6;
        vertical-align: middle;        
      }
      .bgimg{
        display: inline-block;
        margin-top:-3px;
        height: 24px;
        width: 24px;
        background-size: 24px 24px;
        background-repeat: no-repeat;
        @include bgimg("./images/ruhexuanzhe");
        font-size: 0;
        vertical-align: middle;
        line-height: 1px;
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  export default {
    name: 'NewPublish',
    data () {
      return {
        down1: true,
        down2: true,
        down3: true,
        fruitShow1: false,
        fruitShow2: false,
        fruitShow3: false
      }
    },
    methods: {
      toggle1 () {
        this.down1 = !this.down1
        this.fruitShow1 = !this.fruitShow1
        this.down3 = true
        this.down2 = true
        this.fruitShow3 = false
        this.fruitShow2 = false
        // return true
      },
      toggle2 () {
        this.down2 = !this.down2
        this.fruitShow2 = !this.fruitShow2
        this.down1 = true
        this.down3 = true
        this.fruitShow1 = false
        this.fruitShow3 = false
      },
      toggle3 () {
        this.down3 = !this.down3
        this.fruitShow3 = !this.fruitShow3
        this.down1 = true
        this.down2 = true
        this.fruitShow1 = false
        this.fruitShow2 = false
      },
      detailPage () {
        this.$router.push('/publish/Detail')
      },
      goSelectPage () {
        this.$router.push('/publish/HowSelected')
      }
    },
    components: {
      headTop
    }
  }
</script>
